<template>
  <div class="myIndent">
    <div class="ddheader">
    <router-link :to="{name:url1}">
		<i class="el-icon-arrow-left elleft" @click="quefan"></i>
	</router-link>
		<h3>我的订单</h3>
	</div>
	<div class="mycon">
		<mt-navbar v-model="selected" class="nav">
		  <mt-tab-item id="1" class="tab">待支付/确认</mt-tab-item>
		  <mt-tab-item id="2" class="tab">已支付</mt-tab-item>
		  <mt-tab-item id="3" class="tab">已取消/退款</mt-tab-item>
		  <mt-tab-item id="4" class="tab">全部</mt-tab-item>
		</mt-navbar>

		<!-- tab-container -->
		<mt-tab-container v-model="selected">
		  <mt-tab-container-item id="1">
		    <ul class="main">
		    	<li v-for="(obj,index) in daizhifu">
					<p class="type">待确认</p>
					<div>
						<img :src="obj.img" alt="">
						<p class="price">￥{{obj.priAll}}</p>
						<p class="zong"><span>共{{obj.wan}}晚</span><span>{{obj.fjs}}间</span></p>
						<button @click="btn(obj,index)">取消</button>
					</div>
		    	</li>
		    </ul>
		  </mt-tab-container-item>
		  <mt-tab-container-item id="2">
		    <ul class="main">
		    	<li v-for="obj in zhifu">
					<p class="type">已支付</p>
					<div>
						<img :src="obj.img" alt="">
						<p class="price">￥{{obj.priAll}}</p>
						<p class="zong"><span>共{{obj.wan}}晚</span><span>{{obj.fjs}}间</span></p>
					</div>
		    	</li>
		    </ul>
		  </mt-tab-container-item>
		  <mt-tab-container-item id="3">
		   <ul class="main">
		    	<li v-for="obj in quxiao">
					<p class="type">已取消</p>
					<div>
						<img :src="obj.img" alt="">
						<p class="price">￥{{obj.priAll}}</p>
						<p class="zong"><span>共{{obj.wan}}晚</span><span>{{obj.fjs}}间</span></p>
					</div>
		    	</li>
		    </ul>
		  </mt-tab-container-item>
		   <mt-tab-container-item id="4">
		    <ul class="main">
		    	<li v-for="obj in all">
					<p class="type">{{obj.type}}</p>
					<div>
						<img :src="obj.img" alt="">
						<p class="price">￥{{obj.priAll}}</p>
						<p class="zong"><span>共{{obj.wan}}晚</span><span>{{obj.fjs}}间</span></p>
					</div>
		    	</li>
		    </ul>
		  </mt-tab-container-item>
		</mt-tab-container>
	</div>
  </div>
</template>

<script>
export default {
  name: 'myIndent',
  data () {
    return {
      selected:'1',
      all:eventBus.indentArr,
      daizhifu:[],
      zhifu:[],
      quxiao:[],
      url1:''
    }
  },
  mounted:function(){
  	for(var i of eventBus.indentArr){
  		if(i.type == '待确认'){
  			this.daizhifu.push(i)
  		}else if(i.type == '已支付'){
  			this.zhifu.push(i)
  		}else if(i.type == '已取消'){
  			this.quxiao.push(i)
  		}
  	}
  },
  methods:{
  	quefan(){
  		if(localStorage.aa == '1'){
  			this.url1 = 'mine'
  		}else if(localStorage.aa == '2'){
  			this.url1 = 'journey'
  		}else if(localStorage.aa == '3'){
  			this.url1 = 'journey'
  		}
  	},
  	btn(obj,i){
  		obj.type = '已取消';
  		this.daizhifu.splice(i,1);
  		this.quxiao.push(obj);
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.myIndent{
	width: 100%;
	height: 100%;
	background: #f4f4f4;
	position: fixed;
	top:0;
	left: 0;
	z-index: 999;
	overflow-y: auto;
	.ddheader{
		width: 100%;
		height: 50px;
		border-bottom: 1px solid #eee;
		text-align: center;	
		line-height: 50px;
		background: white;
		.elleft{
			font-size: 20px;
			line-height: 50px;
			margin-left: 20px;
			float: left;
		}
	}
	.mycon{
		.nav{
			background: #eee;
		}
		.tab{
			border-bottom: none;
		}
		.main{
			li{
				list-style: none;
				background: white;
				margin-bottom: 10px;
			}
			.type{
				text-align: right;
				line-height: 40px;
				padding-right: 20px;
				border-bottom: 1px solid #eee;
				box-sizing: border-box;
				color:#666;
			}
			div{
				padding: 20px;
				width: 100%;
				box-sizing: border-box;
				position: relative;
				img{
					float: left;
					width: 40%;
					margin-right: 20px;
				}
				.price{
					font-size: 20px;
					color:red;
					line-height: 50px;
				}
				.zong{
					line-height: 50px;
					font-size: 17px;
					span{
						margin-right: 10px;
					}
				}
				button{
					position: absolute;
					bottom: 20px;
					right: 20px;
					width: 50px;
					height: 30px;
					border:none;
					color:white;
					background: red;
				}
			}
		}
	}
}
</style>